<template>
  <div class="container" @dragstart="handleDragStart">
    <div draggable="true" class="item" v-for="(item, index) in dsls" :key="index" :data-index="index">
      <span>{{ item.label }}</span>
    </div>
  </div>
</template>

<script setup>
import dsls from '@/materials/index'

const handleDragStart = e => {
  // 就是告诉画布，用户当前拖拽的是哪一个组件，方便画布渲染对应的组件
  // 通过下标去找到对应的 dsl，这里通过 dataTransfer.setData 去传递下标数据
  // 这不是唯一的方式哈，还可以用状态管理，也不一定非用下标，key-value 结构的话，key 也行
  e.dataTransfer.setData('index', e.target.dataset.index)
}
</script>

<style lang="scss" scoped>
.container {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  padding: 10px;

  .item {
    width: 45%;
    border: 1px solid #ddd;
    cursor: grab;
    margin-bottom: 10px;
    text-align: center;
    padding: 2px 5px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 2px;

    &:active {
      cursor: grabbing;
    }
  }
}
</style>
